import React, { Component } from 'react'
import { observer } from 'mobx-react/custom'
import { List, InputItem, Button } from 'antd-mobile'
import PasswordForgetVM from 'cvm/passwordForget/passwordForget'
import './passwordForget.less'

const PasswordForgetList = observer(({ vm }) => {
  return (
    <div className='forget-password'>
      <List style={{ backgroundColor: 'white' }}>
        <div>
          <InputItem
            placeholder='请输入手机号'
            type='phone'
            id='phone'
            onChange={(v) => vm.onChange(v, 'PhoneNumber')}
            onBlur={(v) => vm.phoneCodeValid(v)}
          >联系电话
          </InputItem>
          <input type='button' onClick={() => vm.handleGetCode(this)} value={vm.codeValue} className={vm.codeClass} disabled={vm.codeDisable} />
        </div>
        <InputItem
          placeholder='请输入验证码'
          clear
          maxLength='6'
          type='number'
          onChange={(v) => vm.onChange(v, 'UserCode')}
        >验证码</InputItem>
        <InputItem
          placeholder='请输入6-16位新密码'
          clear
          maxLength='16'
          type='password'
          onChange={(v) => vm.onChange(v, 'Password')}
        >密码</InputItem>
      </List>
      <div className='btn-box'>
        <Button type='primary' onClick={() => vm.handleChangePassWord()}>确定</Button>
      </div>
    </div>
  )
})

@observer
class passwordForget extends Component {
  constructor (props) {
    super(props)
    window.document.title = '修改密码'
    this.vm = new PasswordForgetVM(props)
  }
  render () {
    return (
      <div>
        <PasswordForgetList vm={this.vm} />
      </div>
    )
  }
}

export default passwordForget
